<template>
  <el-table
    :data="filterTableData"
    style="margin-top: 10px"
    border
    :height="height"
    v-loading="pageLoading"
    element-loading-text="数据加载中..."
  >
  <el-table-column label="序号" type="index" width="60" align=center />
    <el-table-column label="" prop="UserName">
      <template #header>
        <el-space>
          <el-input
            v-model="searchValue"
            size="small"
            placeholder="搜索客户名称"
          />
        </el-space>
      </template>
    </el-table-column>
    <el-table-column
      label="总订单数"
      prop="Order_Total"
      sortable
      width="110"
    ></el-table-column>
    <el-table-column
      label="未下单天"
      prop="NoOrderDays"
      sortable
      width="110"
    ></el-table-column>
    <el-table-column label="统计">
      <template #header>
        统计
        <el-button v-if="more" type="primary" link @click="emits('openMore')"
          >更多
          <el-icon class="el-icon--right"><ArrowRight /></el-icon>
        </el-button>
      </template>
      <template v-slot="scope">
        <div>最近一月新订单数：{{ scope.row.Order_New1 }}</div>
        <div>最近三月新订单数：{{ scope.row.Order_New }}</div>
        <div>上次订单时间：{{ dateFormatter(scope.row.LastOrderTime) }}</div>
      </template>
    </el-table-column>
  </el-table>
  <div style="width: 100%; display: flex; justify-content: center">
    <el-pagination
      v-model:current-page="currentPage"
      :default-page-size="pageSize"
      layout="total, sizes, prev, pager, next"
      :total="total"
      :page-sizes="[100]"
      @change="handlePageChange"
    />
  </div>
</template>
<script setup>
import { ArrowRight } from '@element-plus/icons-vue';
const emits = defineEmits(["openMore"]);
const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
  height: {
    type: [Number, String],
    default: () => 290,
  },
  more: {
    type: Boolean,
    default: () => false,
  }
});

const customerStatPagin = inject("customerStatPagin");
const pageLoading = inject("customerStatPageLoading");

const total = ref(props.data.TotalCount);
const pageSize = ref(props.data.Count);

const currentPage = ref(1);

watch(props.data, (newVal) => {
  console.log("props.data", newVal);
  // total.value = newVal.length;
});

const searchValue = ref("");
const filterTableData = computed(
  () =>
    props.data.Data &&
    props.data.Data.filter(
      (data) =>
        !searchValue.value ||
        data.UserName.toLowerCase().includes(searchValue.value.toLowerCase())
    )
);
function dateFormatter(date) {
  //后端返回日期格式，Date(时间戳)
  let res = date.match(/(?<=\()(.+?)(?=\))/g);
  if (res) {
    let t = new Date(+res[0]);
    let m = t.getMonth() + 1;
    let d = t.getDate();
    let y = t.getFullYear();
    return `${y}-${m < 10 ? "0" + m : m}-${d < 10 ? "0" + d : d}`;
  }
  return "未知时间";
}
function handlePageChange(pageNum) {
  customerStatPagin(pageNum);
}
</script>
